<!DOCTYPE html><html lang="zh-cn"><head><meta charset="utf-8"><meta name="X-UA-Compatible" content="IE=edge"><title> Effective-JavaScript读书笔记2 · 细雨听风</title><meta name="description" content="Effective-JavaScript读书笔记2 - Scott"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="icon" href="/favicon.png"><link rel="stylesheet" href="/css/apollo.css"><link rel="search" type="application/opensearchdescription+xml" href="http://example.com/atom.xml" title="细雨听风"><meta name="generator" content="Hexo 6.2.0"><link rel="alternate" href="/atom.xml" title="细雨听风" type="application/atom+xml">
</head><body><div class="wrap"><header><a href="/" class="logo-link"><img src="/favicon.png" alt="logo"></a><ul class="nav nav-list"><li class="nav-list-item"><a href="/" target="_self" class="nav-list-link">BLOG</a></li><li class="nav-list-item"><a href="/archives/" target="_self" class="nav-list-link">ARCHIVE</a></li><li class="nav-list-item"><a href="/about" target="_self" class="nav-list-link">ABOUT</a></li></ul></header><main class="container"><div class="post"><article class="post-block"><h1 class="post-title">Effective-JavaScript读书笔记2</h1><div class="post-info">2022年7月13日</div><div class="post-content"><h2 id="尽量少用全局变量"><a href="#尽量少用全局变量" class="headerlink" title="尽量少用全局变量"></a>尽量少用全局变量</h2><ul>
<li>定义全局变量会污染共享的公共命名空间，并可能导致意外的命名冲突。</li>
<li>全局变量不利于模块化</li>
</ul>
<p>JavaScript的全局命名空间也被暴露在程序全局作用于中可以访问的全局对象，该对象作为this关键字的初始值。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">this.foo; // undefined</span><br><span class="line">foo = &quot;global foo&quot;;</span><br><span class="line">this.foo; // &quot;global foo&quot;</span><br></pre></td></tr></table></figure>

<p>全局对象也会自动地添加进全局命名空间:</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">var foo = &quot;global foo&quot;;</span><br><span class="line">this.foo = &quot;changed&quot;;</span><br><span class="line">foo; // &quot;changed&quot;</span><br></pre></td></tr></table></figure>

<h2 id="闭包的特点"><a href="#闭包的特点" class="headerlink" title="闭包的特点"></a>闭包的特点</h2><ul>
<li><p>1、JavaScript允许你引用在当前函数以外定义的变量。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">function makeSandwich()&#123;</span><br><span class="line">    var magicIngredient = &quot;peanut butter&quot;;</span><br><span class="line">    function make(filling) &#123;</span><br><span class="line">        return magicIngredient + &quot; and&quot; + filling</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    return make(&quot;jelly&quot;)</span><br><span class="line">&#125;</span><br><span class="line">makeSandwich(); // &quot;peanut butter and jelly&quot;</span><br></pre></td></tr></table></figure>
</li>
<li><p>2、即使外部函数已经返回，当前函数仍然可以引用在外部函数所定义的变量</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">function makeSandwich()&#123;</span><br><span class="line">    var magicIngredient = &quot;peanut butter&quot;;</span><br><span class="line">    function make(filling) &#123;</span><br><span class="line">        return magicIngredient + &quot; and&quot; + filling</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    return make</span><br><span class="line">&#125;</span><br><span class="line">var f = makeSandwich(); </span><br><span class="line">f(&quot;jelly&quot;); // &quot;peanut butter and jelly&quot;</span><br><span class="line">f(&quot;bananas&quot;); // &quot;peanut butter and bananas&quot;</span><br><span class="line">f(&quot;marshmallows&quot;); // &quot;peanut butter and marshmallows&quot;</span><br></pre></td></tr></table></figure></li>
</ul>
<p>这是如何工作的？ 答案是：JS的函数值在内部存储他们可能会引用的定义在其封闭作用域的变量，利用这点，我们可以优化上面代码：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">function makeSandwich(magicIngredient)&#123;</span><br><span class="line">    function make(filling) &#123;</span><br><span class="line">        return magicIngredient + &quot; and&quot; + filling</span><br><span class="line">    &#125;</span><br><span class="line">    return make</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>var hamAnd &#x3D; makeSandwich(“ham”);<br>hamAnd(“cheese”); &#x2F;&#x2F; “ham and cheese”<br>hamAnd(“mustard”); &#x2F;&#x2F; “ham and mustard”</p>
<p>上面代码还可以优化为：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">function makeSandwich(magicIngredient)&#123;</span><br><span class="line">    return function(filling) &#123;</span><br><span class="line">        return magicIngredient + &quot; and&quot; + filling</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<ul>
<li>3、闭包可以更新外部变量的值<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">function box() &#123;</span><br><span class="line">    var val = undefined;</span><br><span class="line">    return &#123;</span><br><span class="line">        set: function(newVal) &#123; val = newVal; &#125;,</span><br><span class="line">        get: function() &#123; return val; &#125;,</span><br><span class="line">        type: function() &#123;return typeof val; &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line">var b = box();</span><br><span class="line">b.type(); // &quot;undefined&quot;</span><br><span class="line">b.set(98.6);</span><br><span class="line">b.get(); // 98.6</span><br><span class="line">b.type(); // &quot;number&quot;</span><br></pre></td></tr></table></figure></li>
</ul>
</div></article></div></main><footer><div class="paginator"><a href="/2022/07/12/Effective-JavaScript/" class="next">下一篇</a></div><div class="copyright"><p>© 2015 - 2022 <a href="http://example.com">Scott</a>, powered by <a href="https://hexo.io/" target="_blank">Hexo</a> and <a href="https://github.com/pinggod/hexo-theme-apollo" target="_blank">hexo-theme-apollo</a>.</p></div></footer></div><script async src="//cdn.bootcss.com/mathjax/2.7.0/MathJax.js?config=TeX-MML-AM_CHTML" integrity="sha384-crwIf/BuaWM9rM65iM+dWFldgQ1Un8jWZMuh3puxb8TOY9+linwLoI7ZHZT+aekW" crossorigin="anonymous"></script></body></html>